<template>
  <div class="awesome-container layout-pd">
    <el-card shadow="hover" :header="`svg 图标`">
      <el-alert
        title="使用 vite-plugin-svg-icons插件 文档 ：https://github.com/vbenjs/vite-plugin-svg-icons; 组件使用：<svg-icon name='xxx' :icon-style='{width: 100px, height: 100px}' />"
        type="primary"
        :closable="false"
        class="mb15"
      ></el-alert>
      <el-row class="iconfont-row">
        <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="2" v-for="(v, k) in sheetsIconList" :key="k">
          <div class="iconfont-warp FlexBox s-row-center">
            <div class="m-auto t-center">
              <svg-icon :name="v" :icon-style="iconStyle" class="svg-icon" />
              <div class="iconfont-warp-label mt10">{{ v }}</div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup lang="ts" name="svg-example">
import { useIconsStore } from "@/stores/modules/icons";
import { ElRow, ElCol } from "element-plus"
const iconStyle = { width: "32px", height: "32px" };
// 定义变量内容
const sheetsIconList = computed(()=> useIconsStore().iconList);
</script>

<style scoped lang="scss">
$border-color: rgba(74, 136, 245, 0.2);
.awesome-container {
  .iconfont-row {
    border-top: 1px solid $border-color;
    border-left: 1px solid $border-color;
    .iconfont-warp {
      border-right: 1px solid $border-color;
      border-bottom: 1px solid $border-color;
      height: 120px;
      // overflow: hidden;
      transition: all 0.3s ease;
      &:hover {
        box-shadow: 0 2px 24px rgba(0, 0, 0, 0.1);
        cursor: pointer;
        transition: all 0.3s ease;
        .iconfont-warp-label {
          color: rgb(74, 136, 245);
          transition: all 0.3s ease;
        }
        .svg-icon {
          fill: rgb(74, 136, 245);
        }
      }
      .iconfont-warp-label {
        color: #fff;
        transition: all 0.3s ease;
      }
      .svg-icon {
        fill: #fff;
        margin: auto;
      }
    }
  }
}
</style>
